import "./Banner.scss";
import TrackVisibility from 'react-on-screen';
import Type from "@animation/Type"
import axios from "axios"

interface Sentence {
  content: string;
}
interface RequestSentenceData {
  status: string,
  data: {
    data: Sentence[],
    results: number
  }
}

const Banner = memo(() => {
  const [font, setFont] = useState<string[]>([])
  useEffect(() => {
    axios.get<RequestSentenceData>("/api/sentences").then(res => {
      const data = res.data.data
      const arr: string[] = data.data.map(v => v.content)
      setFont(arr)
    })
  }, [])

  return (
    <section className="banner-com" id="home">
      <div className="show-box">
        <div className="font-box">
          <p className="title">Welcome to my Portfolio</p>
          <Type prefix="Hi! I'm sishen " font={font} />
          <p className="intro">
            I like to create beautiful web, use Node to create RESTful API.
            I enjoy this process and now my goal is to create games that
            everyone likes, immortal like Hero3.
          </p>
          <div className="connect" onClick={() => { location.replace("#connect") }}>
            <p>Let&apos;s connect</p>
            <img src="/img/left.svg" alt="->" />
          </div>
        </div>
        <TrackVisibility once>
          {({ isVisible }) =>
            <img className={isVisible ? "head-img active" : "head-img"} src="/img/header-img.svg" alt="Header Img" />
          }
        </TrackVisibility>
      </div>
    </section>
  )
})

export default Banner
